<template>
  <transition name="slideInRight">
    <div class="playStrategyList-wrapper">
      <scroll
        ref="scroll"
        :data="travelsList"
        :pullDownRefresh="true"
        :pullUpLoad="true"
        @pullingDown="onPullingDown"
        @pullingUp="onPullingUp">
        <div class="travels">
          <div v-for="item in travelsList" :key="item.id" class="item" @click="toDetail(item.id)">
            <!-- <div v-if="item.articleType == 0"> -->
              <div class="travels-top">
                <div style="width: 48.5%">
                  <p class="title">{{item.title}}</p>
                  <p class="desc" v-if="item.articleType == 0">{{item.intro}}</p>
                  <div v-else class="people">
                    <img class="avatar" v-lazy="item.userHeadUrl" />
                    <span class="nickname">{{item.userName}}</span>
                    <span style="max-width: 105px; overflow: hidden;">在
                      <b>{{item.addressName}}</b>
                    </span>
                  </div>
                </div>
                <div class="img" v-lazy:backgroundImage="item.firstImg" style="width: 48.5%"></div>
              </div>
              <div class="travels-bottom">
                <p class="travels-type" :class="{primary: item.articleType == 0}">{{item.articleType == 0 ? '游记' : '攻略'}}</p>
                <p>
                  <b>{{item.browseCount}}</b> 浏览
                  <b>·</b>
                </p>
              </div>

            <!-- </div> -->
          </div>
        </div>
      </scroll>

    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import SearchHeader from '@/components/seach-header/seach-header'
import Scroll from '@/components/scroll/scroll'
import GlobalSearch from '@/components/global-search/global-search'
import { TransferDom, Popup } from 'vux'

import animations from 'create-keyframe-animation'
import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
import defaultAvatar from '@/assets/img/default_avatar.png'
import youjiIcon from '@/assets/img/icon/youji.png'
import gonglueIcon from '@/assets/img/icon/gonglue.png'
import { handleBackMixin, statusBarMixin } from '@/assets/js/mixin'
import { QINIU_PREFIX } from '@/api/config'

export default {
  name: 'StrategyList',
  mixins: [handleBackMixin, statusBarMixin],
  data() {
    return {
      youjiIcon,
      gonglueIcon,
      statusBarColor: 'white',
      showSearch: false,
      showSelectType: false,
      defaultAvatar,
      seachValue: '',
      searchList: [],
      travelsList: [],
      allPopupModels: ['showSearch', 'showSelectType']
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'TravelsEdit' || from.name === 'TravelsPerfect') {
        vm._getPlayStrategList()
      } else {
        const scrollTop = vm.$store.getters.scrollTop
        if (vm.$refs.scroll && scrollTop.StrategyList) {
          vm.$refs.scroll.scrollTo(0, scrollTop.StrategyList)
        }
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$store.commit('SET_SCROLL_TOP', {StrategyList: this.$refs.scroll.scroll.y})
    next()
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, Scroll, Popup, SearchHeader, GlobalSearch
  },
  created() {
    this.paddingTop = 24
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingTop = 34
      this.paddingBottom = 24
    }
    this.pageNum = 1

    animations.registerAnimation({
      name: 'rotateOut',
      animation: [
        {
          transform: 'translate(-50%, 0)'
        },
        {
          transform: 'translate(-50%, ' + (this.paddingBottom + 100) + 'px)'
        }
      ],
      presets: {
        duration: 800,
        resetWhenDone: true
      }
    })
    animations.registerAnimation({
      name: 'rotateIn',
      animation: [
        {
          transform: 'translate(-50%, ' + (this.paddingBottom + 100) + 'px)'
        },
        {
          transform: 'translate(-50%, 0)'
        }
      ],
      presets: {
        duration: 800,
        resetWhenDone: true
      }
    })

    this._getPlayStrategList()
  },
  methods: {
    _getPlayStrategList() {
      const _self = this
      // articleType中0为游记，1为攻略
      axios.get(this, '/v1/playStrategy', {
        pageNum: this.pageNum,
        articleType: 0
      }, (data) => {
        // console.log(data)
        if (data.length === 0) {
          if (_self.pageNum > 0) {
            if (_self.$refs.scroll) {
              _self.pageNum--
              _self.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            _self.$refs.scroll.hiddenPullDown()
          }
          return
        }
        data.forEach(item => {
          if (item.userHeadUrl) {
            if (item.userHeadUrl.indexOf(QINIU_PREFIX) > -1) {
              item.userHeadUrl += '-bheader'
            }
          } else {
            item.userHeadUrl = defaultAvatar
          }
          if (item.firstImg && item.firstImg.indexOf(QINIU_PREFIX) > -1) {
            item.firstImg += '-w200'
          }
        })
        if (_self.pageNum <= 1) {
          _self.travelsList = data
        } else {
          _self.travelsList = _self.travelsList.concat(data)
        }
      })
    },
    onPullingDown() {
      this.pageNum = 1
      this._getPlayStrategList()
    },
    onPullingUp() {
      this.pageNum++
      this._getPlayStrategList()
    },
    toDetail(id) {
      this.$router.push(`/address/playStrategy/${id}`)
    },
    clickPlus () {
      const user = localUser.get()
      if (user == null || user.id == null) {
        this.$router.push('/login')
        return
      }
      if (user.local === 1 || user.local === '1') {
        this.showSelectType = true
      } else {
        this.$router.push(`/address/travelsEdit/0`)
      }
    },
    sendDynamic (type) {
      const user = localUser.get()
      if (user == null || user.id == null) {
        this.$router.push('/login')
        return
      }
      this.showSelectType = false
      this.$router.push(`/address/travelsEdit/${type}`)
    }
  },
  watch: {
    showSelectType () {
      if (this.showSelectType) {
        this.statusBarColor = 'black'
      } else {
        this.statusBarColor = 'white'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl';

.playStrategyList-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: $color-background;
  z-index: 102;

  .travels {
    background: #fff;
    .item {
      margin: 0 15px;
      padding: 15px 0;
      border-bottom: 1px solid #f8f8f8;
      .travels-top {
        display: flex;
        justify-content: space-around;
        line-height: 1.3;
        .title {
          font-size: $font-size-title;
          font-weight: bold;
          min-height: 60px;
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 3
          -webkit-box-orient vertical
        }
        .desc {
          margin-top: 8px;
          font-size: $font-size-desc;
          color: #666;
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
        }
        .people {
          display: flex;
          align-items: center;
          margin-top: 12px;
          font-size: $font-size-desc;
          .avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
          }
          .nickname {
            overflow : hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 6px;
            max-width calc(100% - 90px)
          }
        }
        .img {
          height: 110px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
      .travels-bottom {
        display: flex;
        justify-content: space-between;
        font-size: $font-size-small;
        align-items: center;
        margin-top: 9px;
        .travels-type {
          padding: 3px 5px;
          border-radius: 2px;
          line-height: 1;
          border: 1px solid $color-theme-1;
          color: $color-theme-1;
        }
        .primary {
          border: 1px solid $color-theme;
          color: $color-theme;
        }
      }
    }
  }

  .plus {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 201;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: $color-theme;
    display: inline-block;
    box-shadow: 0 0 8px $color-theme;
    .icon {
      fill: #fff;
      margin-top: 5px;
    }
  }
}

.popup-wrapper {
  background: #fff;
  .select-type {
    .row {
      display: flex;
      justify-content: space-around;
      .item {
        width: 100px;
        text-align: center;
        margin-bottom: 12px;
        img {
          width: 50px;
          height: 50px;
        }
        p {
          margin-top: -5px;
        }
      }
    }
  }

  .search-list {
    padding: 15px;
    list-style: none;
    line-height: 1.6;

    li {
      border-bottom: 1px solid $color-border;
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .name {
      font-weight: bold;
      width: calc(100% - 55px)
    }
    .travels-type {
      width: 40px;
      font-size: $font-size-small;
      padding: 3px 0;
      text-align: center;
      border-radius: 2px;
      line-height: 1;
      border: 1px solid $color-theme-1;
      color: $color-theme-1;
    }
    .primary {
      border: 1px solid $color-theme;
      color: $color-theme;
    }
  }
}
</style>
